<template>
  <div class="common-layout">
    <el-container>
      <el-main>
        <el-form :inline="true">
          <el-form-item>
            <el-button icon="ArrowLeft" @click="router.push('/questionBank')">返回题库</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="Plus" @click="save">添加题目</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="danger" icon="Delete" @click="del(ipts)">批量删除</el-button>
          </el-form-item>
          <el-form-item label="题目名称:">
            <el-input v-model="form.questionTitle" placeholder="请输入题目名称" clearable style="width: 150px" />
          </el-form-item>
          <el-form-item label="题目类型:">
            <el-select v-model="form.questionType" placeholder="请选择" clearable style="width: 240px">
              <el-option v-for="(item, index) in typeOptions" :key="index" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="题目状态:">
            <el-select v-model="form.status" placeholder="请选择" clearable style="width: 240px">
              <el-option v-for="(item, index) in statusOptions" :key="index" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="Search" @click="search">查询</el-button>
          </el-form-item>
          <el-form-item>
            <el-button icon="Close" @click="clear">清空</el-button>
          </el-form-item>
        </el-form>

        <!-- 列表渲染开始 -->
        <el-table ref="multipleTableRef" v-loading="loading" style="width: 100%" :data="tableData"
          @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55" align="center" />
          <el-table-column property="id" label="题号" width="55" align="center" />
          <el-table-column property="questionTitle" label="题目名称" min-width="180" show-overflow-tooltip align="center" />
          <el-table-column property="analysis" label="题目解析" min-width="180" show-overflow-tooltip align="center" />
          <el-table-column label="题目类型" width="100" align="center">
            <template v-slot="scope">
              <el-tag type="success">
                {{ scope.row.questionType == 0 ? "单选" :
                  scope.row.questionType == 1 ? "多选" :
                    scope.row.questionType == 2 ? "判断" :
                      scope.row.questionType == 3 ? "主观题" : "编程题"
                }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="状态" width="100" align="center">
            <template v-slot="scope">
              <el-tag :type="scope.row.status == 0 ? 'primary' : scope.row.status == 1 ? 'success' : 'danger'">
                {{ scope.row.status == 0 ? " 未审批" : scope.row.status == 1 ? "审批通过" : "审批驳回" }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" fixed="right" width="200" align="center">
            <template v-slot="scope">
              <el-link type="primary" icon="edit" style="margin-right: 10px" @click="update(scope.row.id)">修改</el-link>
              <el-link type="danger" icon="delete" style="margin-right: 10px" @click="del(scope.row)">删除</el-link>
            </template>
          </el-table-column>
        </el-table>
        <!-- 列表渲染结束 -->
        <!-- 分页开始 -->
        <el-pagination v-model:current-page="page" v-model:page-size="size" :page-sizes="[5, 10, 15, 20]"
          :background="true" layout="total, sizes, prev, pager, next" :total="total" @size-change="handleSizeChange"
          @current-change="handleCurrentChange" />
        <!-- 分页结束 -->
      </el-main>
    </el-container>
  </div>
</template>

<script setup>
import axios from '@/axios/index.js'
import { onMounted, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'


const route = useRoute()
const router = useRouter()
const ipts = ref([])//多选框数组
const qbid = ref()//题库id
const typeOptions = ref([
  {
    label: '单选题',
    value: '0'
  },
  {
    label: '多选题',
    value: '1'
  },
  {
    label: '判断题',
    value: '2'
  },
  {
    label: '主观题',
    value: '3'
  }
])
const statusOptions = ref([
  {
    label: '未审批',
    value: 0
  },
  {
    label: '审批通过',
    value: 1
  },
  {
    label: '审批驳回',
    value: 2
  }
])
let loading = ref(false)
let tableData = ref([])
let form = ref({
  questionBanksId: route.params.id,
  questionTitle: '',
  questionType: '',
  status: ''
})
let page = ref(1)
let size = ref(5)
let total = ref(10)

//批量删除题目
let del = function (ids) {
  let questionIds = ref([])
  if (ids.length == null) {
    questionIds.value.push(ids.id)
  } else {
    for (let i = 0; i < ids.length; i++) {
      questionIds.value.push(ids[i].id)
    }
  }
  if (questionIds.value.length < 1) {
    ElMessageBox.alert('请选择至少一条数据', '系统提示', {
      confirmButtonText: '好的',
      type: 'warning'
    }).then(() => { })
    return
  }
  ElMessageBox.confirm(
    '此操作将永久删除该题目,请确认是否删除?',
    '系统提示',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(() => {
    axios.delete(`/api/v1/admin/questions`, {
      params: {
        questionIds: questionIds.value.join(",")
      }
    }).then(response => {
      ElMessage({
        type: 'success',
        message: response.data.message
      })
      getQuestionsList(page.value, size.value, qbid.value)
    })
  }).catch(() => { })
}

//获取题目列表
let getQuestionsList = function (page, size, questionBanksId) {
  axios.get(`/api/v1/admin/questions`, {
    params: {
      page,
      size,
      questionBanksId,
      questionTitle: form.value.questionTitle,
      questionType: form.value.questionType,
      status: form.value.status
    }
  }).then(response => {
    tableData.value = response.data.data.data
    total.value = response.data.data.total
  })
}

//模糊查询
let search = function () {
  axios.get(`/api/v1/admin/questions`, {
    params: {
      page: page.value,
      size: size.value,
      questionBanksId: form.value.questionBanksId,
      questionTitle: form.value.questionTitle,
      questionType: form.value.questionType,
      status: form.value.status
    }
  }).then(response => {
    tableData.value = response.data.data.data
    total.value = response.data.data.total
  })
}

//清空模糊查询
let clear = function () {
  form.value = {
    questionBanksId: route.params.id,
    questionTitle: '',
    questionType: '',
    status: ''
  }
  search()
}

onMounted(() => {
  qbid.value = route.params.id
  getQuestionsList(page.value, size.value, qbid.value)
})

//添加页面
let save = function () {
  router.push(`/questionBank/questions/${route.params.id}/saveOrUpdateQuestion/0`)
}

//修改页面
let update = function (id) {
  router.push({
    path: `/questionBank/questions/${route.params.id}/saveOrUpdateQuestion/${id}`
  })
}

//答案处理
let answer = function (options) {
  let temp = ref([])
  for (let i = options.length - 1; i >= 0; i--) {
    temp.value.push(options[i])
  }
  return temp.value
}

//当多选框发生变化
const handleSelectionChange = (val) => {
  ipts.value = val
  console.log(ipts.value)
}

//当page发生变化时触发
const handleCurrentChange = (val) => {
  getQuestionsList(val, size.value, qbid.value)
}

//当size发生变化时触发
const handleSizeChange = (val) => {
  getQuestionsList(page.value, val, qbid.value)
}
</script>

<style scoped>
body {
  background-color: #f6f8f9;
}

.common-layout {
  height: 100%;
}

.el-header,
.el-footer {
  background-color: #B3C0D1;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #fff;
  color: #333;
  text-align: center;
  padding: 10px 5px 0 10px;
  border-radius: 5px;
}

.el-main {
  height: 100%;
  background-color: #fff;
  color: #333;
  margin-left: 20px;
  border-radius: 5px;
}

body>.el-container {
  margin-bottom: 40px;
}

.el-container {
  height: 100%;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
</style>